<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            //元素
   //document.getElementById();
   //document.getElementsByClassName();
   //document.getElementsByName();
   //document.getElementsByTagName();

   //document.querySelector();对象
   //document.querySelectorAll();数组

   // var li = document.querySelector("#li1");
    //console.log( li.parentElement.parentElement.parentElement)
    //console.log( li.parentNode.parentNode.parentNode.parentNode)

    //var ul = document.querySelector("ul");
    //console.log(ul.hasChildNodes)文本节点
    //console.log(ul.children) 不包括文本节点
   // var li = document.querySelector("#li1");
    //console.log(li.nextElementSibling)
    //console.log(li.nextSibling)
    //console.log(li.previousElementSibling)
    

//样式
   //var li = document.querySelector("#li1");
       //li.style.color="red"
       //li.style.backgroundColor="#ccc";  驼峰命名法
         //li.style["background-color"]="#ccc";

         //属性 attributes
         //console.log(li.id)
         //console.log(li.attributes["data-id"]) name value
         //console.log(li.className)

        //事件
        //*click
        //*change  单选、多选状态改变时触发   下拉框选项改变   文本框的值改变
        //*mouseover
        //*mouseout
        //keydown
        //*keypress
        //keyup
   

       //var btn = document.querySelector("button");
       //btn.onclick = function(){
           //console.log(this.value) 交互控件的值
      // }
        // var li =document.querySelector("#li1");
        // li.onclick =function(){
            //console.log(this.innerHTML)html
            // console.log(this.innerText) text

           // console.log(this.outerHTML)含有本身
         //}

         var select = document.querySelector("select");
         //select.onclick =function(){
            // console.log(this.value)
         //}
         select.onchange = function(){
             console.log(this.value)
         }

        }
    </script>
</head>
<body>
    <!--<ul>
        <li id="li1" class="li" data-id="0" id2="2">列表1<span>99</span></li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>列表5</li>
    </ul>
    <button value="click">单机</button>  -->
    <select name="" id="" size="" multiple=""> //小于零显示全部
        <option value="1">选项1</option>
        <option value="2">选项2</option>
        <option value="3">选项3</option>
    </select>
</body>
</html>

//软件bootstrap
animate   wow.js
echarts